import { options_district } from '../common/optionConfig';

const colors = [
  '#f18870',
  '#e94520',
  '#1b54a9',
  '#1a76a5',
  '#3ed8be',
  '#34a471',
  '#ff9800',
  '#b2152c',
  '#80abeb',
  '#7bc6ea',
  '#77d5a9',
  '#ffc877',
  '#8c14f0',
  '#f07f90',
  '#2871dd',
  '#3ed8be',
  '#37af78',
  '#0484b1',
  '#eb5230',
  '#ffbd00',
  '#9bbdef',
  '#9bd3ef',
  '#619bfa',
  '#ffd699',
  '#f7b8a9',
  '#2169d3',
  '#de1a37',
  '#028458',
  '#ffff00',
  '#aa6500',
  '#f7860c',
  '#58b6e5',
  '#56ca95',
  '#ffb74c'
];
const chartOption1 = {
  color: ['#66A1FF'],
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    top: '5%',
    left: '20%',
    bottom: '10%',
    right: '10%'
  },
  xAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: 'rgba(0,0,0,0.1)'
      }
    },
    axisLabel: {
      textStyle: {
        color: '#333'
      }
    },
    show: true,
    type: 'value',
    axisTick: {
      show: false
    },
    splitLine: {
      //纵向分隔线
      show: true,
      lineStyle: {
        color: 'rgba(0,0,0,0.1)',
        type: 'dotted'
      }
    }
  },
  yAxis: {
    data: [],
    axisLine: {
      lineStyle: {
        color: 'rgba(0,0,0,0.1)'
      }
    },
    axisLabel: {
      textStyle: {
        color: '#333'
      }
    },
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    }
  },
  series: [
    {
      name: '',
      type: 'bar',
      barWidth: 12,
      data: [],
      itemStyle: {
        //柱形图圆角，初始化效果
        barBorderRadius: [0, 5, 5, 0]
      },
      label: {
        show: true,
        position: 'right',
        color: '#0263FF',
        fontSize: 14
      }
    }
  ]
};
const chartOption2 = {
  legend: {
    // type: 'scroll',
    orient: 'vertical',
    right: '5%',
    top: '5%',
    icon: 'circle',
    itemGap: 10,
    textStyle: {
      color: '#333'
    }
  },
  series: [
    {
      type: 'pie',
      radius: ['30%', '80%'],
      center: ['30%', '50%'],
      labelLine: {
        show: true
      },
      label: {
        show: true,
        align: 'center',
        // formatter: function (params) {
        //   const name = params.name;
        //   return [`${name}\n${params.value}个,${params.percent}%`];
        // }
      },
      data: []
    }
  ]
};
const chartOption3 = {
  legend: {
    orient: 'vertical',
    right: '5%',
    top: '30%',
    icon: 'circle',
    itemGap: 10,
    textStyle: {
      color: '#333'
    }
  },
  series: [
    {
      type: 'pie',
      radius: ['30%', '80%'],
      center: ['30%', '50%'],
      labelLine: {
        show: true
      },
      label: {
        show: true,
        align: 'center',
        // formatter: function (params) {
        //   const name = params.name;
        //   return [`${name}\n${params.value}个`];
        // }
      },
      data: []
    }
  ]
};
const chartOption4 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: 20,
    left: 30,
    bottom: 20,
    right: 20
  },
  xAxis: {
    type: 'category',
    boundaryGap: true,
    splitLine: {
      show: false
    },
    data: ['0-1亿', '1-5亿', '5-10亿', '10-30亿', '30-100亿', '100亿以上'],
    axisLabel: {
      interval: 0,
      textStyle: {
        color: '#333'
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#ccc'
      }
    }
  },
  yAxis: {
    type: 'value',
    show: true,
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#ccc'
      }
    },
    axisLabel: {
      textStyle: {
        color: '#333'
      }
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  series: [
    {
      type: 'bar',
      barWidth: 30,
      itemStyle: {
        normal: {
          barBorderRadius: [10, 10, 0, 0],
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: 'linear',
            global: false,
            colorStops: [
              {
                offset: 0,
                color: '#0041FF'
              },
              {
                offset: 1,
                color: '#6E94FF'
              }
            ]
          },
          label: {
            show: true,
            // formatter: `{c}个`,
            position: 'top',
            textStyle: {
              fontSize: '12',
              color: '#0263FF'
            }
          }
        }
      },
      data: []
    }
  ]
};

const chartIndex = {
  tooltip: {
    axisPointer: {
      type: 'shadow'
    },
    trigger: 'axis',
    formatter: function (params) {
      return `完成情况${params[0].name}亿元--完成率${params[0].value.toFixed(2)}%`;
    }
  },
  grid: {
    top: '3%',
    left: '6%',
    bottom: '6%',
    right: '3%'
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: true,
      splitLine: {
        show: false
      },
      data: [],
      axisLabel: {
        interval: 0,
        textStyle: {
          color: '#333'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    {
      type: 'category',
      position: 'top',
      boundaryGap: true,
      splitLine: {
        show: false
      },
      data: [],
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    {
      type: 'category',
      position: 'top',
      boundaryGap: true,
      splitLine: {
        show: false
      },
      data: [],
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    }
  ],
  yAxis: {
    type: 'value',
    show: true,
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#ccc'
      }
    },
    axisLabel: {
      formatter: '{value} ' + '%',
      textStyle: {
        color: '#333'
      }
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    min: 0
  },
  series: [
    {
      type: 'bar',
      barWidth: 30,
      itemStyle: {
        normal: {
          barBorderRadius: [10, 10, 0, 0],
          color: function (params) {
            return params.value > 100 ? '#81AFF3' : '#E56767';
          },
          label: {}
        }
      },
      showBackground: false,
      data: [],
      z: 1,
      xAxisIndex: 2
    },
    {
      type: 'bar',
      barWidth: 30,
      itemStyle: {
        normal: {
          barBorderRadius: 0,
          color: 'rgba(180, 180, 180, 0.2)',
          label: {}
        }
      },
      tooltip: {
        show: false
      },
      showBackground: false,
      barGap: '-100%',
      data: [],
      z: 5,
      xAxisIndex: 1
    },
    {
      data: [],
      symbolPosition: 'end',
      type: 'pictorialBar',
      symbolSize: [30, 2],
      symbolOffset: [0, -2],
      z: 4,
      itemStyle: {
        normal: {
          color: '#FF4E17' // 0% 处的颜色
        }
      }
    }
  ]
};

export {
  chartOption1,
  chartOption2,
  chartOption3,
  chartOption4,
  chartIndex,
  colors
};
